<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            /* text-decoration: none; */
        }
        a{
            text-decoration: none;
        }
        body{
            background-color: #f5f5f5;
        }
        .container {
            width: 1226px;
            height: 674px;
            margin: 0 auto;
        }
        .head{
            display: flex;
            height: 60px;
            justify-content: space-between;
        }
        .text .title{
            font-size: 22px;
            font-weight: 200;
            line-height: 60px;
            color: #333;
        }
        .tab_list{
            width: 120px;
            height: 40px;
            margin-top: 10px;
            line-height: 60px;
        }
        .tab_list li{
            display: inline-block;
            height: 40px;
            margin-left: 20px;
            font-size: 16px;
            color: #424242;
        }
        .tab_list li:hover{
            color: #ff6700;
            border-bottom: 1px solid #ff6700;
            cursor: pointer;
        }
        .main{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 614px;
            /* background-color: pink; */
        }
        .left{
            width: 234px;
            height: 614px;
        }
        .left img{
            width: 100%;
            height: 614px;
        }
        .right{
            width: 978px;
            height: 614px;
            /* background-color: purple; */
        }
        .watch_list{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            height: 614px;
        }
        .watch_list li{
            display: flex;
            width: 234px;
            height: 300px;
            background-color: #fff;
            flex-direction: column;
        }
        .list{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        /* 手表项 */
        .item{
            /* display: flex; */
            width: 234px;
            height: 300px;
            text-align: center;
            box-sizing: border-box;
            padding: 10px;
            /* justify-content: flex-start;
            flex-direction: column;
            align-items: center; */
        }
        .item img{
            margin-top: 20px;
            width: 160px;
            height: 160px;
        }
        .caption{
            font-size: 14px;
            font-weight: 400;
            color: #333;
        }
        .desc{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #b0b0b0;
            font-size: 12px;
            height: 18px;
            margin: 10px 0 20px;
        }
        .price {
            display: flex;
            justify-content: center;
        }
        .price .num,.boxx .num{
            color: #ff6700;
            margin-right: 5px;
        }
        .price .dele{
            color: #b0b0b0;
            font-size: 14px;
            margin-left: 5px;
        }
        /* 右下角两个小盒子 */
        .two_li{
            display: flex;
            height: 300px;
            width: 234px;
            flex-direction: column;
            justify-content: space-between;
            
        }
        .list .two_li{
            background-color: #f5f5f5;
        }
        .two_li .min_li{
            background-color: #fff;
        }
        .min_li{
            width: 234px;   
            height: 143px;
            box-sizing: border-box;
            /* background-color: red; */
            /* padding: 10px; */
        }
        .min_li img{
            width: 80px;
            height: 80px;
        }
        .min_li a{
            display: flex;
            width: 234px;
            height: 50px;
            margin-top: 30px;
            justify-content: space-around;
        }
        .boxx{
            width: 80px;
        }
        .boxx .num{
            font-size: 14px;
            margin-top: 10px;
        }
        .min_li .more+.arrows{
            width: 50px;
            height: 50px;
        }
        .arrows .circle{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: #ff6700;
            border:solid #ff6700;
            font-size: 30px;
            text-align: center;
            line-height: 40px;
        }
        .more{
            font-size: 18px;
            color: #333;
        }
        .headset{
            font-size: 5px;
            color: #757575;
            margin-top: 5px;
        }
        .min_li .mores{
            margin-top: 50px;
        }
        /* 给每个item加过渡效果 */
        .main .left,.opt li,.two_li .min_li{
            transition: all 0.5s ease;
        }
        
        .main .left:hover,.two_li .min_li:hover,.opt li:hover{
            transform: translateY(-5px);
            box-shadow: 0 5px 5px 5px rgb(230, 230, 230);
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <div class="head">
            <div class="text">
                <h2 class="title">智能穿戴</h2>
            </div>
            <div class="tab">
                <ul class="tab_list">
                    <li>耳机</li>
                    <li>穿戴</li>
                </ul>
            </div>
        </div>
        <div class="main">
            <!-- 左边图片 -->
            <div class="left">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c9550c95ee33a22dc8db677dada00f09.jpg?thumb=1&w=293&h=768&f=webp&q=90" alt="">
            </div>
            <!-- 右边的手表列表 -->
            <div class="right">
                <ul class="watch_list">
                    <div class="list">
                        <!-- 每一个商品项 -->
                        <div class="opt">
                            <li>
                                <a href="#" class="item">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208111200_c1016839eae2c1f5bb79d5afde498e81.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                                    <h3 class="caption">
                                        Xiaomi Buds 4 Pro
                                    </h3>
                                    <p class="desc">48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频</p>
                                    <div class="price">
                                        <p>
                                            <span class="num">999元</span>
                                        </p>
                                        <del><span class="dele">1099元</span></del>
                                    </div>
                                </a>
                            </li>
                        </div>
                        <div class="opt">
                            <li>
                                <a href="#" class="item">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11570d5371f16d2d9b19f504e09d01f0.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                                    <h3 class="caption">
                                        Redmi Buds 3
                                    </h3>
                                    <p class="desc">轻巧半入耳 | 通话降噪 | 20小时长续航</p>
                                    <div class="price">
                                        <p>
                                            <span class="num">159元</span>
                                        </p>
                                        <del><span class="dele">199元</span></del>
                                    </div>
                                </a>
                            </li>
                        </div>
                    </div>
                    <div class="list">
                        <div class="opt">
                            <li>
                                <a href="#" class="item">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202204211422_ce41ed00fe7fb79df35101222880121d.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                                    <h3 class="caption">
                                        Xiaomi Buds 3 Pro
                                    </h3>
                                    <p class="desc">40dB自适应降噪 ｜空间音频 ｜ HiFi高保真音质</p>
                                    <div class="price">
                                        <p>
                                            <span class="num">499元</span>
                                        </p>
                                        <del><span class="dele">699元</span></del>
                                    </div>
                                </a>
                            </li>
                        </div>
                        <div class="opt">
                            <li>
                                <a href="#" class="item">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202111052007_e8e92e67988ebaff6e075412a54c3c66.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                                    <h3 class="caption">
                                        小米真无线蓝牙耳机Air2 SE
                                    </h3>
                                    <p class="desc">大尺寸动圈单元 | 20小时持久续航 | 双麦克风通话降噪</p>
                                    <div class="price">
                                        <p>
                                            <span class="num">99元</span>
                                        </p>
                                        <del><span class="dele">169元</span></del>
                                    </div>
                                </a>
                            </li>
                        </div>
                    </div>
                    <div class="list">
                        <div class="opt">
                            <li>
                                <a href="#" class="item">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0b271a074e087848357aa61ae665b214.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                                    <h3 class="caption">
                                        Xiaomi Buds 3
                                    </h3>
                                    <p class="desc">40dB宽频主动降噪 | HiFi高保真音质 | HRTF专业调音</p>
                                    <div class="price">
                                        <p>
                                            <span class="num">299元</span>
                                        </p>
                                        <del><span class="dele">499元</span></del>
                                    </div>
                                </a>
                            </li>
                        </div>
                        <div class="opt">
                            <li>
                                <a href="#" class="item">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210191430_3ad0e4809ce06a126dea9755adbb2a1b.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                                    <h3 class="caption">
                                        Xiaomi骨传导耳机
                                    </h3>
                                    <p class="desc">小米首款骨传导耳机</p>
                                    <div class="price">
                                        <p>
                                            <span class="num">699元</span>
                                        </p>
                                        <!-- <del><span class="dele">499元</span></del> -->
                                    </div>
                                </a>
                            </li>
                        </div>
                    </div>
                    <div class="list">
                        <div class="opt">
                            <li>
                                <a href="#" class="item">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205241527_fb27e27e6587254da27de5ba9c889512.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                                    <h3 class="caption">
                                        Redmi Buds 4
                                    </h3>
                                    <p class="desc">35dB 智能主动降噪 | AI 通话降噪 | 30小时超长续航</p>
                                    <div class="price">
                                        <p>
                                            <span class="num">199元</span>
                                        </p>
                                        <del><span class="dele">299元</span></del>
                                    </div>
                                </a>
                            </li>
                        </div>
                        <li class="two_li">
                            <div class="min_li">
                                <a href="#">
                                    <div class="boxx">
                                        <h3 class="caption">
                                            Xiaomi降噪蓝牙耳机Necklace
                                        </h3>
                                        <div class="num">499元</div>
                                    </div>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209261427_67cd5fddb341f0e0fb0a2295e643b0d8.png?thumb=1&w=125&h=125&f=webp&q=90" alt="">
                                </a>
                            </div>
                            <div class="min_li">
                                <a href="#" class="mores">
                                    <div class="more">
                                        浏览更多
                                        <div class="headset">
                                            耳机
                                        </div>
                                    </div>
                                    <div class="arrows">
                                        <div class="circle">
                                            →
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </li>
                    </div>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>